<template>
  <div class="common-layout">
    <el-container style="height: 90vh;">
      <el-header class="header">
        <div class="header-content">
          <span class="header-title">{{ video.videoName }}</span>
          <el-button class="back-button" @click="goBack" type="primary" icon="el-icon-arrow-left">返回</el-button>
        </div>
      </el-header>
      <el-main class="main" style="border-color:black;">
        <video v-if="video.url" controls style="width: 100%; height: auto;">
          <source :src="video.url" type="video/mp4" />
          您的浏览器不支持视频标签。
        </video>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getVideoService } from "@/apis/video";
import router from "@/router";

function goBack() {
  router.go(-1);
}

const video = reactive({ url: '' });
let videoId = useRoute().query.videoId;

async function getVideo() {
  const res = await getVideoService(videoId);
  Object.assign(video, res.data);

  // 假设 res.data 中包含视频的 URL
  video.url = res.data.url; // 这里请根据实际返回的数据结构调整
  video.url = `http://localhost:20000/user/video/video-stream?videoId=${videoId}`;
  console.log(video);
}

onMounted(async () => {
  await getVideo();
});
</script>

<style lang="scss" scoped>
.common-layout {
  background-color: #f0f4ff;

  .header {
    height: 6%;
    display: flex;
    align-items: center;
    background-color: #007bff;
    color: white;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      width: 100%;

      .header-title {
        font-size: 20px;
      }

      .back-button {
        margin-left: auto;
      }
    }
  }

  .main {
    display: flex;
    justify-content: center;
    padding: 20px;

    video {
      width: 100%;
      /* 设置视频宽度 */
      height: auto;
      /* 自适应高度 */
    }
  }
}
</style>